import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from '@/common/layer';
import mobileselect from '@/common/mobileselect';
import Rate from '@/Components/rate';
import DDView from '@/Components/ddview';
import InlinePicker from '@/Components/inlinepicker';
import jquery from 'jquery';
import Sel1View from '@/components/sel1'
import RadioPicker2 from '@/components/RadioPicker2'
import RadioPicker1 from '@/components/RadioPicker1'
import Picker from '@/components/picker'

class Defbboss extends Component {
    constructor(props) {
        super(props);
        this.state = {
            prolist: [],
            saleid: '',
            salereason: '',
            stateimg: ['/assets/wechat/tag_nopass.png', '/assets/wechat/tag_stop.png', '/assets/wechat/tag_finish.png', '/assets/wechat/tag_cancel.png'],
            protit: '销售员',
            professionalGroups: [{ value: 0, label: '陈祥' }, { value: 1, label: '施海文' }, { value: 2, label: '赵绿妍' }, { value: 3, label: '吴雨薇' }],
            professional: -1,
            professionalLabel: '',
            professionalShow: false,
            status: -1,
            salephone: -1,
            starttime: -1,
            handlelist: [],
            remark: ['', '', '拒单原因', '取消原因', '放款备注']
        }
    }

    componentDidMount() {
        this.feedback()
        this.gethandlelist()
        var that = this
        jquery("li").on("click", function () {
            jquery(this).find("i").toggleClass("irotate");
            jquery(this).siblings().find("i").removeClass("irotate");
            // that.feedback(jquery(this).index())
            var classname = jquery(this).attr("class")
            jquery("." + classname + 'item').toggleClass("isshow")
            jquery("." + classname + 'item').siblings().removeClass("isshow")
        })

        // 点击筛选
        var that = this
        jquery(".statusitem" + " span").on("click", function () {
            var cont = jquery(this).html()
            var id = jquery(this).attr("id")
            that.setState({ status: id })
            console.log("status:  " + that.state.status)
            console.log("starttime:  " + that.state.starttime)
            that.feedback()
            var j = jquery(this).parent().attr("class").indexOf("item")
            var val = jquery(this).parent().attr("class").substr(0, j)
            jquery("." + val).html(cont)
            jquery(this).parent().toggleClass("isshow")
        })

        jquery(".starttimeitem" + " span").on("click", function () {
            var cont = jquery(this).html()
            var id = jquery(this).attr("id")
            that.setState({ starttime: id })
            console.log("status:  " + that.state.status)
            console.log("starttime:  " + that.state.starttime)
            that.feedback()
            var j = jquery(this).parent().attr("class").indexOf("item")
            var val = jquery(this).parent().attr("class").substr(0, j)
            jquery("." + val).html(cont)
            jquery(this).parent().toggleClass("isshow")
        })
    }

    //获取销售列表'userType':1,  运营列表'userType':0,
    async gethandlelist() {
        let sendobj = {
            'userType': 1,
        }
        let res = await util.rjax({
            url: '/otherProductUser/getHandlerList',
            type: "post",
            data: sendobj
        })
        if (res) {
            var data = res.data.rows
            for (let i in data) {
                var obj = {}
                obj = { value: data[i].name, label: data[i].phone }
                this.state.handlelist.push(obj)
            }
            // 销售员选项
            var that = this
            var mobileSelect1 = new MobileSelect({
                trigger: '#trigger1',
                title: '单项选择',
                wheels: [
                    { data: that.state.handlelist }
                ],
                position: [2], //初始化定位 打开时默认选中的哪个 如果不填默认为0
                transitionEnd: function (indexArr, data) {
                    // var index = indexArr + "".substr(1, 1)
                    that.setState({ salephone: data[0].label })
                    console.log(that.state.salephone)
                    //  that.feedback()
                },
                callback: function (indexArr, data) {
                    that.setState({ salephone: data[0].label })
                    console.log(that.state.salephone)
                    that.feedback()
                }
            });
        }
    }

    //筛选列表
    async feedback() {
        let sendobj = {
            salePhone: this.state.salephone == -1 ? null : this.state.salephone,
            queryStatus: this.state.starttime == -1 ? null : this.state.starttime,
            status: this.state.status == -1 ? null : this.state.status,
        }
        let res = await util.rjax({
            url: '/otherProductStatus/getList',
            type: "post",
            data: sendobj
        }).catch((e) => {
            jquery(".errormsg").html(e.data.msg)
        })
        if (res) {
            this.setState({ prolist: res.data.rows })
        }
    }

    async godetail(e) {
        window.location.href = `./debosslook.html?id=` + e.target.id + "&apply=" + e.target.getAttribute("apply");
    }

    render() {
        let prolist = this.state.prolist.map((item, index) => {
            return (
                <div className="oneitem" key={index}>
                    <div className="basepoint">
                        <p className="rows">
                            <span className="l"> <i className="iconpro"></i><b>产品：</b>{item.productName}</span>
                            <span className="r"> <i className="iconyunying"></i><b>运营：</b>{item.handlerName}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="iconkehu"></i><b>客户：</b>{item.name}</span>
                        </p>
                        <p className="rows">
                            <span className="l"><i className="icontime"></i><b>提交时间：</b>{item.startTime}</span>
                        </p>
                    </div>
                    <p className="detail" style={{ display: (item.status == 0 || item.status == 1) ? 'block' : 'none' }} onClick={this.godetail.bind(this)} apply={item.apply} id={item.id}>查看处理进度<span className="rotate"><img className="pullimg" src="/assets/wechat/right.png" alt="" /></span></p>
                    <h4 className="rejecttit" style={{ display: (item.status == 2 || item.status == 3 || item.status == 4) ? 'block' : 'none' }}>{this.state.remark[item.status]}</h4>
                    {/* <p className="rejectreason" style={{ display: (item.status == 2 || item.status == 3 || item.status == 4) ? 'block' : 'none' }}>{item.endReason || item.saleReason || item.sixthRemark}</p> */}
                    <p className="rejectreason" style={{display:item.status==4?'block':'none'}}>{item.sixthRemark}</p>
                    <p className="rejectreason" style={{display:item.status==3?'block':'none'}}>{item.saleReason}</p>
                    <p className="rejectreason" style={{display:item.status==2?'block':'none'}}>{item.endReason}</p>
                </div>
            )
        })

        return (
            <div className="feedback">
                <div className="tab">
                    <ul>
                        <li className="status" data-id="0">状态<i></i></li>
                        {/* <li className="saleman" data-id="1">销售员<i></i></li> */}
                        <li className="saleman" id="trigger1" data-id="1">销售员<i></i></li>
                        <li className="starttime" data-id="2">提交时间<i></i></li>
                    </ul>
                    <div>
                        <div className="statusitem">
                            <span id="0">未处理</span>
                            <span id="1">处理中</span>
                            <span id="2">已拒单</span>
                            <span id="3">已取消</span>
                            <span id="4">已放款</span>
                            <span id="-1">全部</span>
                        </div>
                        <div className="salemanitem">
                            {/* <Sel1View className="master" title={this.state.protit} label={this.state.professionalLabel} onClick={() => { this.setState({ professionalShow: true }) }} /> */}
                            {/* <Picker show={this.state.professionalShow} groups={this.state.professionalGroups} onChange={(val, label) => { this.setState({ professional: val, professionalLabel: label, professionalShow: false }) }} onMaskClick={() => { this.setState({ professionalShow: false }) }} /> */}
                        </div>
                        <div className="starttimeitem">
                            <span id="6">一个月内</span>
                            <span id="7">三个月内</span>
                            <span id="8">半年内</span>
                            <span id="-1">全部</span>
                        </div>
                    </div>
                </div>

                <div style={{ display: 'block' }}>
                    <div className="oneMonth">
                        {prolist}
                    </div>
                </div>

            </div>

        )
    }
}

ReactDom.render(<Defbboss />, document.getElementById("app"));